<template>
	<div style="position: relative;">
		<Row>
	        <Col span="24"  style="text-align: center;">
	            <Card style="width:880px;margin: auto;">
	                <p slot="title"><slot></slot></p>
	                <Row >
				        <Col span="12" >
				        	<span>年级：</span>
				            <Select v-model="selectgradeid"  disabled style="width:200px">
				                <Option v-for="item in importgradelist" :value="item.value" :key="item.value">{{ item.label }}</Option>
				            </Select>
				        </Col>
				        <Col span="12" >
				        	<span>班级：</span>
				            <Select v-model="selectclassid"  disabled style="width:200px">
				                <Option v-for="item in importclasslist" :value="item.value" :key="item.value">{{ item.label }}班</Option>
				            </Select>
				        </Col>
				    </Row>
	                <Row style="margin-top:15px;">
				        <Col span="12" >
				        	<span>姓名：</span>
							<Input v-model="name"  placeholder="请输入姓名" style="width:200px"></Input>
				        </Col>
				        <Col span="12">
				        	<span>学号：</span>
							<Input v-model="studentno" placeholder="请输入学号" style="width:200px"></Input>
				        </Col>
				    </Row>
				    <Row style="margin-top:15px;">
				    	<Col span="12" >
				        	<span>性别：</span>
				            <Select v-model="sex" style="width:200px">
				                <Option v-for="item in sexlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
				            </Select>
				        </Col>
				        <Col span="12">
				        	<span>座号：</span>
							<Input v-model="seatno" placeholder="请输入班级座号" style="width:200px"></Input>
				        </Col>
				        
				        
				    </Row>
				    <Row style="margin-top:15px;">
				    	<Col span="12">
				        	<span>手机：</span>
							<Input v-model="mobile" placeholder="请输入手机号码" style="width:200px"></Input>
				        </Col>
				        <Col span="12" >
				        	<span>生日：</span>
							<DatePicker v-model="birthday"  type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
				        </Col>
				        
				    </Row>
				    <Row style="margin-top:15px;">
				    	
				        <Col span="24" >
				        	<span>地址：</span>
							<Input v-model="address" placeholder="请输入地址" style="width:625px;"></Input>
				        </Col>
				    </Row>
				    <Row>
				    	<Col span="24" style="margin-top:15px">
				    		<Button type="ghost" @click="chance" icon="close-round">取消</Button>
				    		<Button type="primary" @click="savestudent" icon="checkmark-round">保存</Button>
				    	</Col>
				    </Row>
	            </Card>
	        </Col>
	    </Row>
	    <Spin size="large" fix v-if="loadingShow"></Spin>
	    
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	
	export default{
		props:{
			importgradeid:"",
			importclassid:"",
			importgradelist: {
		        type: Array,
		        default: function () {return []}
		   	},
			importclasslist: {
		        type: Array,
		        default: function () {return []}
		    },
		    
			importstudentid:""		//父组件传来的编辑学生的id
		},
		data(){
			return{
				seatno:"",							//班级座号
				name:"",							//新增学生的名字
				studentno:"",						//学生的学号
				mobile:"",							//学生的手机号码
				birthday:"",				//填写的生日
				sex:"",						//填写的性别id
				address:"",					//填写的学生的地址
				selectclassid:"",
				selectgradeid:"",
				
				loadingShow:false,			//控制面板的加载中的显示和隐藏
				sexlist: [
//					{value: '1',label: '男'},
//                  {value: '2',label: '女'},  
                ],
			}
		},
		created(){
			this.getsexlist();
			this.editstudent();
//			//console.log(this.importgradeid)
//			//console.log(this.importclassid)
		},
		methods:{
			chance:function(){
				this.$emit('chance')
			},
			savestudent:function(){
//				if(this.importgradeid == "" || this.importclassid == "" ){
//					this.$Message.error({
//							content: "请完善信息后再提交",
//							duration: 10,
//							closable: true
//						});
//					return;
//				}
				
				this.loadingShow = true;
				
				
				if(this.importstudentid == ""){
					var studentdata = 
						{id:"",
						seatNo:this.seatno,
						name:this.name,
						studentNo:this.studentno,
						gradeId:this.selectgradeid,
						classesId:this.selectclassid,
						status:"",
						birthday:this.formatDate(this.birthday,"yyyy-MM-dd"),
						mobile:this.mobile,
						sex:this.sex,
						address:this.address}
				}else{
					var studentdata = 
						{id:this.importstudentid,
						seatNo:this.seatno,
						name:this.name,
						studentNo:this.studentno,
						gradeId:this.selectgradeid,
						classesId:this.selectclassid,
						status:"",
						birthday:this.formatDate(this.birthday,"yyyy-MM-dd"),
						mobile:this.mobile,
						sex:this.sex,
						address:this.address}
				}
				
				var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/addStudent';
            	this.$http.post(url,studentdata).then(function(response) {
					if(response.data.success == true){
						self.$Message.success({
		                    content: '保存成功',
		                    duration: 10,
		                    closable: true
               			})
						self.$emit('chance')
						self.loadingShow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            		self.loadingShow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00008',
							duration: 10,
							closable: true
						});
						self.loadingShow = false;
					});
				
				
			},
			getsexlist:function(){
				this.loadingShow = true;
				var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getSexSelect';
            	this.$http.post(url,{}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.sexlist = response.data.data
						self.loadingShow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            		self.loadingShow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00009',
							duration: 10,
							closable: true
						});
						self.loadingShow = false;
					});
			},
			editstudent:function(){
				//如果等于空那么是新增年级，如果有的话则是编辑，拿id去取年级信息
				
				if(this.importstudentid == ""){
					return;
				}else{
					this.loadingShow = true;
					var self = this;
	            	let url = api.apidomain+'/tqes/web/tchStudent/getStudentInfo';
	            	this.$http.post(url, {id:this.importstudentid}).then(function(response) {
						if(response.data.success == true){
//							console.log(response.data.data)
							
							self.name = response.data.data.name						//新增学生的名字
							self.seatno = response.data.data.seatNo						//新增学生的座号
							self.studentno = response.data.data.studentNo						//学生的学号
							self.mobile = response.data.data.mobile							//学生的手机号码
							self.birthday = response.data.data.birthday				//填写的生日
							self.sex = response.data.data.sex						//填写的性别id
							self.address = response.data.data.address					//填写的学生的地址
							self.selectclassid = response.data.data.classesId
							self.selectgradeid = response.data.data.gradeId
							
							self.loadingShow = false;
							
		           }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
				            self.loadingShow = false;
		            	}
		            	
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00010',
							duration: 10,
							closable: true
						});
						self.loadingShow = false;
					});
				}
			},
			//格式化日期的函数
			formatDate:function(date,format){
				if(date == "" || date == null){
					return "";
				}
		        var paddNum = function(num){
		          num += "";
		          return num.replace(/^(\d)$/,"0$1");
		        }
		        //指定格式字符
		        var cfg = {
		           yyyy : date.getFullYear() //年 : 4位
		          ,yy : date.getFullYear().toString().substring(2)//年 : 2位
		          ,M  : date.getMonth() + 1  //月 : 如果1位的时候不补0
		          ,MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0
		          ,d  : date.getDate()   //日 : 如果1位的时候不补0
		          ,dd : paddNum(date.getDate())//日 : 如果1位的时候补0
		          ,hh : date.getHours()  //时
		          ,mm : date.getMinutes() //分
		          ,ss : date.getSeconds() //秒
		        }
		        format || (format = "yyyy-MM-dd hh:mm:ss");
		        return format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
		    } 
		},
		watch:{
			importstudentid:function(newValue, oldValue){
				this.editstudent();
			}
		}
	}
</script>

<style>
	input::-ms-input-placeholder{text-align: center;}
 	input::-webkit-input-placeholder{text-align: center;}
</style>